/**
* LoadingBox 组件
* 功能：提供全局加载提示框，支持自定义样式和动画效果
*
* 特性：
* 1. 支持自定义加载图片和文字
* 2. 支持自定义遮罩层透明度
* 3. 支持自定义加载框样式（背景色、圆角、内边距等）
* 4. 内置淡入和旋转动画效果
* 5. 响应式设计，适配不同屏幕尺寸
*/
<template>
    <!-- 遮罩层：当visible为true时显示，使用maskOpacity控制透明度 -->
    <view v-if="visible" class="loading-mask" :style="{ backgroundColor: `rgba(0, 0, 0, ${maskOpacity})` }">
        <!-- 加载内容容器：使用contentStyle动态计算样式 -->
        <view class="loading-content" :style="contentStyle">
            <!-- 加载图片：支持自定义图片和尺寸，带有旋转动画 -->
            <image v-if="loadingImage" class="loading-image" :src="loadingImage" mode="aspectFit"
                :style="{ width: imageSize + 'rpx', height: imageSize + 'rpx' }">
            </image>
            <!-- 加载文字：支持自定义文字、颜色和大小 -->
            <text v-if="loadingText" class="loading-text" :style="{ color: textColor, fontSize: textSize + 'rpx' }">
                {{ loadingText }}
            </text>
        </view>
    </view>
</template>

<script>
import { defineComponent, computed } from 'vue';

export default defineComponent({
    name: 'LoadingBox',
    // Props定义：组件的可配置项
    props: {
        // 控制加载框的显示和隐藏
        visible: {
            type: Boolean,
            default: false
        },
        // 自定义加载图片的URL
        loadingImage: {
            type: String,
            default: ''
        },
        // 加载提示文字
        loadingText: {
            type: String,
            default: '加载中...'
        },
        // 加载图片的尺寸（单位：rpx）
        imageSize: {
            type: Number,
            default: 80
        },
        // 文字颜色
        textColor: {
            type: String,
            default: '#ffffff'
        },
        // 文字大小（单位：rpx）
        textSize: {
            type: Number,
            default: 28
        },
        // 遮罩层透明度（0-1之间）
        maskOpacity: {
            type: Number,
            default: 0.6
        },
        // 加载框背景色
        backgroundColor: {
            type: String,
            default: 'rgba(0, 0, 0, 0.8)'
        },
        // 加载框圆角大小（单位：rpx）
        borderRadius: {
            type: Number,
            default: 12
        },
        // 加载框内边距（单位：rpx）
        padding: {
            type: Number,
            default: 30
        }
    },
    // 组合式API：处理组件逻辑
    setup(props) {
        // ===== 计算属性 =====
        const contentStyle = computed(() => ({
            backgroundColor: props.backgroundColor,
            borderRadius: props.borderRadius + 'rpx',
            padding: props.padding + 'rpx'
        }));

        // ===== 返回数据 =====
        return {
            contentStyle
        };
    }
});
</script>

<style lang="less" scoped>
/* 遮罩层样式 */
.loading-mask {
    // 固定定位，覆盖整个视口
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // 确保显示在最上层
    z-index: 9999;
    // 使用flex布局实现居中
    display: flex;
    justify-content: center;
    align-items: center;

    /* 加载内容容器样式 */
    .loading-content {
        // 使用flex布局，垂直排列内容
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // 设置最小尺寸，确保内容不会过小
        min-width: 200rpx;
        min-height: 200rpx;
        // 添加阴影效果
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
        // 添加淡入动画
        animation: fadeIn 0.3s ease;

        /* 加载图片样式 */
        .loading-image {
            margin-bottom: 20rpx;
            // 添加旋转动画
            animation: rotate 1s linear infinite;
        }

        /* 加载文字样式 */
        .loading-text {
            text-align: center;
            line-height: 1.4;
        }
    }
}

/* 淡入动画：实现加载框的显示效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 旋转动画：实现加载图片的旋转效果 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 加载动画：实现加载点的闪烁效果 */
@keyframes spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.15;
    }
}
</style>
